<template>
  <el-card>
    <div class="assignment-form">
      <h1>布置作业</h1>
      <el-form :model="assignment" ref="assignmentForm" label-width="80px">
        <el-form-item
          label="标题"
          :rules="[{ required: true, message: '请输入作业科目', trigger: 'blur' }]"
        >
          <el-input v-model="assignment.title" placeholder="请输入作业科目"></el-input>
        </el-form-item>
        <el-form-item label="内容">
          <el-input
            type="textarea"
            v-model="assignment.description"
            placeholder="请输入作业内容"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitAssignment">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElNotification } from 'element-plus'
import axios from 'axios'

const assignment = ref({
  title: '',
  description: '',
})

const submitAssignment = async () => {
  if (!assignment.value.title) {
    ElNotification({
      title: '错误',
      message: '请填写作业标题',
      type: 'error',
    })
    return
  }

  // 这里可以添加提交作业的逻辑，比如发送到服务器
  const res = await axios.post("/api/assignment/add",assignment.value)
  if (res.data.code === 0){
    ElNotification({
      title: '成功',
      message: '作业已成功布置',
      type: 'success',
    })
  }


  // 重置表单
  assignment.value = {
    title: '',
    description: '',
  }
}
</script>

<style scoped lang="scss">
.assignment-form {
  text-align: center;
  margin-top: 50px;
  padding: 30px;
  background-color: #ffffff;
  border-radius: 12px;

  h1 {
    font-size: 32px;
    color: #444;
    margin-bottom: 25px;
    font-weight: 600;
  }

  .el-form-item {
    margin-bottom: 20px;
  }
}
</style>
